<template>
    <div class="div">
        <pageHeader title="文章列表"></pageHeader>
        <pageSearch>
            <template #input>
                <el-input v-model="state.text" placeholder="输入查询条件" clearable />
            </template>
            <template #button>
                <el-button type="primary" @click="SearchArticle">查 询</el-button>
                <el-button type="primary" @click="addArticle">添 加</el-button>
            </template>
        </pageSearch>

        <el-table :data="state.data" stripe style="width: 100%">
            <el-table-column prop="categories_id" label="ID" width="80" />
            <el-table-column prop="categories_title" label="标题" width="180" />
            <el-table-column />
            <el-table-column />
            <el-table-column label="操作">
                <template #default="{ $index, row }">


                    <el-button size="small" @click="updateArticle(row)">修 改</el-button>


                    <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled" icon-color="#626AEF"
                        title="是否确定删除?" @confirm="deleteArticle(row)">
                        <template #reference>
                            <el-button size="small" type="danger">删 除</el-button>
                        </template>
                    </el-popconfirm>


                </template>
            </el-table-column>
        </el-table>

        <el-pagination @current-change="pagemed" :page-size="2" :pager-count="5" layout="prev, pager, next"
            :total="(<number>state.pagemax * 2)" />



        <el-dialog v-model="state.classshow" @close="Thepopupcloses" :title="state.classsfxg == true ? '添加' : '修改'" width="30%"
            destroy-on-close center>
            <el-input v-model="state.dataadd.categories_title" placeholder="请输入标签名">
                <template #prepend>{{ state.dataadd.categories_id == undefined ? "暂无" : state.dataadd.categories_id }}</template>
            </el-input>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="Cancel">取消</el-button>
                    <el-button type="primary" @click="Areyousure">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>




    </div>
</template>
 
<script setup  lang="ts">
import { InfoFilled } from '@element-plus/icons-vue'
import { onMounted, reactive, toRefs } from "vue";
import http, { format, setItem, getItem } from "@/utils";
import { Row, showToast } from 'vant';
const state:{
    data:{
        categories_id?:number,
        categories_title?:string
    }[],
    dataadd:{
        categories_id?:number,
        categories_title?:string
    },
    pagemax?:number,
    pagea?:number,
    classshow:boolean,
    classtagsfxg:boolean,
    classsfxg:boolean,
    text:string
}=reactive({
    data:[],
    classshow:false,
    classtagsfxg:true,
    classsfxg:true,
    dataadd:{},
    text:""
})

onMounted(() => {
more()
})

const more = async (page:number = 0) => {
   let dd = (await http.classifyselect({page:page}))
   state.data = dd.data
   state.pagemax = dd.pagemax
   console.log("state.data0", state.data)
}
const pagemed = async(val)=>{
   state.pagea = val
   console.log("val", val)
   state.data = (await http.classifyselect({ page: (val - 1) })).data
}
//添加
const addArticle=()=>{
   state.classshow = true
   state.classsfxg = true
}

//查询
const SearchArticle=async()=>{
    console.log("state.text",state.text)
    if(state.text!=""){
        state.data= await http.classifyqueries({text:state.text})
    }else{
        
        more()
    }
   
}

//确定
const Areyousure = async()=>{
    if(state.classsfxg){
        //添加
        http.classifyadd({categories_title:state.dataadd.categories_title})
    }else{
        //修改
        await http.classifyupdata(state.dataadd)
    }

    more((<number>state.pagea - 1))
      showToast(state.classsfxg == true ? "发布成功" : "修改成功");
      state.classshow = false
}

//取消
const Cancel=()=>{
    console.log(52)
    state.dataadd={}
    state.classshow=false
}

//修改
const updateArticle =(row)=>{
    console.log("row",row)
    state.classshow= true
    state.classsfxg=false
    state.dataadd=row
}

//删除
const deleteArticle=async(row)=>{
    await http.classifydelete(row)
    more((<number>state.pagea - 1))
    showToast("删除成功")
}

//弹窗关闭
const Thepopupcloses =()=>{
    console.log(52)
    state.dataadd={}
    state.classshow=false
}
</script>
 
<style lang="less" scoped></style>